<template>
  <div style="width: 100%;height: 100%">
    <div class="flex-row" style="padding: 10px 10px 0 10px;box-sizing: border-box;">
      <div class="div-label" style="color: rgb(78,89,105)">节点类别：</div>
      <div class="div-label" style="color: rgb(29,33,41)">{{propsData.nameLable}}</div>
    </div>
    <div class="flex-row" style="padding: 10px;box-sizing: border-box;border-bottom: 1px solid transparent;border-color: rgb(229,230,235);">
      <div class="div-label" style="color: rgb(78,89,105)">节点标识：</div>
      <div class="div-label" style="color: rgb(29,33,41)">{{propsData.id}}</div>
    </div>

    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane name="节点配置">
        <span slot="label"><i class="iconfont icon-jiedianpeizhi"></i> 节点配置</span>
<!--        数据模型配置-->
        <div style="width: 100%;height: 100%;overflow: hidden" v-if="propsData.nameLable == '数据模型'">
          <DataModalLabelSet v-if="showHas1" @throwName="getThrowName"
          ref="refDataModalLabelSet"></DataModalLabelSet>
        </div>
<!--        条件分支-->
        <div style="width: 100%;height: 100%;overflow: hidden" v-if="propsData.nameLable == '条件分支'">
          <div style="width: 100%;height: 100%;overflow-y: auto">
            <el-alert
              title="同时满足以下条件时进入此分支"
              type="info"
              effect="dark"
              :closable="false"
              show-icon>
            </el-alert>
            <div style="margin-bottom: 10px">
              <div class="div-label" style="color: rgb(78,89,105);margin:10px 0;">条件规则:</div>
              <div>
                <el-button size="small" type="primary" @click="addBranchNameAddList">添加条件</el-button>
              </div>
            </div>

            <div style="margin-bottom: 10px;padding: 10px;box-sizing: border-box;
          border: 1px solid rgb(229,230,235);border-radius: 3px" v-for="(item,index) in expression" :key="item.id">
              <div class="flex-row" style="justify-content: space-between;margin-bottom: 10px">
                <div style="font-size: 12px;font-weight: 700">条件{{index + 1}}</div>
                <div class="hover-proite"><i class="el-icon-close" style="color: red"></i></div>
              </div>
              <div>
                <div class="div-label" style="margin-bottom: 5px">表达式</div>
                <el-input v-model="item.key" :disabled="!$props.dataBranch.priority"></el-input>
              </div>
            </div>
          </div>

        </div>

        <div style="width: 100%;height: 100%;overflow: hidden" v-if="propsData.nameLable == '工作流'">
          <el-form label-width="80px" size="small" style="width: 100%;height: 100%" label-position="top">
            <el-form-item label="流程表单">
              <el-select v-model="propsData.tableName" clearable class="m-2" placeholder="请选择表单模型" @change="getThrowName"
              style="width: 100%">
                <el-option
                  v-for="item in formList"
                  :key="item.value"
                  :label="item.formName"
                  :value="item.formName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="绑定上下文表单流程数据" label-width="150px">
              <el-input v-model="propsData.binding"></el-input>
            </el-form-item>
          </el-form>
        </div>

      </el-tab-pane>
      <el-tab-pane name="异常处理">
        <span slot="label"><i class="iconfont icon-yichangchuli"></i> 异常处理</span>
        <DataModalError v-if="showHas1"></DataModalError>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DataModalLabelSet from "@/views/systeamSet/moduleManage/components/DataModalLabelSet";
import DataModalError from "@/views/systeamSet/moduleManage/components/DataModalError";
import {createId} from "@/api/public";
import {listAllForm} from "@/api/flowable/form";
export default {
  name: "RightAttr",
  components:{
    DataModalLabelSet,
    DataModalError
  },
  props:{
    dataBranch:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return {
      propsData:{
        binding:'',
      },
      hasInput:true,
      showHas1:false,//数据模型
      activeName:'节点配置',
      expression:[],
      formList:[],
    }
  },
  created() {
    console.log(this.$props.dataBranch.propsData,'this.$props.dataBranch.propsData')
    this.propsData = {...this.$props.dataBranch.propsData}
    if(this.propsData.nameLable == '数据模型' || this.propsData.nameLable == '条件分支' || this.propsData.nameLable == '工作流'){
      this.showHas1 = true
      this.activeName = '节点配置'
      if(this.propsData.nameLable == '数据模型'){
        this.$nextTick(()=>{
          this.$refs.refDataModalLabelSet.setDataChild(this.propsData)
        })
      }
      else if(this.propsData.nameLable == '条件分支'){
        this.expression = this.propsData.expression || []
      }
      else if(this.propsData.nameLable == '工作流'){
        // 获取表单信息
        listAllForm().then(res => {
          res.data.forEach(item => {
            item.formId = item.formId.toString();
          })
          this.formList = res.data;
        })
      }
      return
    }
  },
  watch:{
    dataBranch:{
      handler(val){
        this.propsData = {...val}
        if(val.nameLable == '数据模型' || val.nameLable == '条件分支' || val.nameLable == '工作流'){
          this.showHas1 = true
          this.activeName = '节点配置'
          return
        }
      },
      deep:true
    }
  },
  methods:{
    getThrowName(name){
      //模型返回了
      console.log(name,'模型返回了name')
      this.propsData.tableName = name
    },
    getThrowTotalData(){
      if(this.propsData.nameLable == '数据模型'){
        return {
          branchName:this.propsData.branchName,
          branchId:this.propsData.id,
          branchInputName:this.propsData.branchName,
          tableName:this.propsData.tableName,
          ...this.$refs.refDataModalLabelSet.throwModalData()
        }
      }
      else if(this.propsData.nameLable == '条件分支'){
        return {
          branchName:this.propsData.branchName,
          branchId:this.propsData.id,
          branchInputName:this.propsData.branchName,
          // tableName:this.propsData.tableName,
          expression:this.expression
        }
      }
      else if(this.propsData.nameLable == '工作流'){
        return {
          branchName:this.propsData.branchName,
          branchId:this.propsData.id,
          branchInputName:this.propsData.branchName,
          tableName:this.propsData.tableName,
          binding:this.propsData.binding
          // ...this.$refs.refDataModalLabelSet.throwModalData()
        }
      }

    },
    setData(data){
      console.log(data,'data-data-123')
      this.propsData = {
        ...data
      }
      if(data.nameLable == '数据模型'){
        this.$refs.refDataModalLabelSet.setDataChild(data)
      }
      else if(data.nameLable == '条件分支'){
        this.expression = data.expression
      }
      else if(data.nameLable == '工作流'){

      }

    },
    addBranchNameAddList(){
      createId().then(res => {
        if(!this.$props.dataBranch.priority){
          // 说明是默认条件
          this.expression.push({
            key:'default',
            id:res.data
          })
        }
        else{
          this.expression.push({
            key:'',
            id:res.data
          })
        }

        this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
